//事件绑定兼容写法
function _addEvent(target, type, handler) {
  if (target.addEventListener) {
    target.addEventListener(type, function (e) {
      //如果事件函数中出现 return false;则阻止默认事件和阻止冒泡
      if (typeof handler == 'function' && handler() === false) {
        e.preventDefault();
        e.cancelBubble = true;
      }
    }, false);
  } else {
    target.attachEvent('on' + type, function (event) {
      if (typeof handler == 'function' && handler() === false) {
        event.cancelBubble = true;
        event.returnValue = false;
      }
      return handler.call(target, event);
    });
  }
}
//获取计算样式兼容写法
function _getCSS(obj, style) {
  if (window.getComputedStyle) {
    return getComputedStyle(obj)[style];
  }
  return obj.currentStyle[style];
}

//将类数组转换成数组
function _toArray(arrayLike) {
  return Array.from(arrayLike)
}
//构造函数
function Mquery(arg) {
  //保存所选择的元素
  this.elements = [];
  switch (typeof arg) {
    //当参数是函数时，如$(function(){})()，直接运行里面的代码
    case 'function':
      _addEvent(window, 'load', arg);
      break;
    //当参数是字符串时，选择元素
    case 'string':
      this.elements = _toArray(document.querySelectorAll(arg));
      break;
    //当参数是DOM对象时，将DOM对象转换为$对象  
    case 'object':
      if (arg.constructor == Array) {
        this.elements = arg;
      } else {
        this.elements.push(arg);
      }
      break;
  }
}
//根据索引选择元素
Mquery.prototype.eq = function (number) {
  return $(this.elements[number]);
}
//根据元素获取索引
Mquery.prototype.index = function () {
  var elements = this.elements[0].parentNode.children;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i] === this.elements[0]) {
      return i;
    }
  }
}
//筛选出当前匹配的元素集合中每个元素的后代
Mquery.prototype.find = function (str) {
  var arr = [];
  for (var i = 0; i < this.elements.length; i++) {
    Array.prototype.push.apply(arr, this.elements[i].querySelectorAll(str));
  }
  return $(arr);
}
//CSS获取与设置
Mquery.prototype.css = function (attr, value) {
  //如果是对象的形式，以对象的形式设置
  if (typeof attr == 'object') {
    for (var att in attr) {
      for (var j = 0; j < this.elements.length; j++) {
        this.elements[j].style[att] = attr[att];
      }
    }
    //如果不是对象的形式
  } else {
    //设置
    if (arguments.length == 2) {
      for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].style[attr] = value;
      }
      //获取
    } else if (arguments.length == 1) {
      return _getCSS(this.elements[0], attr)
    }
  }
  return this;
}
//attr获取与设置
Mquery.prototype.attr = function (attr, value) {
  //如果是对象的形式
  if (typeof attr == 'object') {
    for (var att in attr) {
      for (var j = 0; j < this.elements.length; j++) {
        this.elements[j].setAttribute(att, attr[att]);
      }
    }
    //如果不是对象的形式
  } else {
    //设置
    if (arguments.length == 2) {
      for (var i = 0; i < this.elements.length; i++) {
        this.elements[i].setAttribute(attr, value);
      }
      //获取
    } else if (arguments.length == 1) {
      return this.elements[0].getAttribute(attr);
    }
  }
  return this;
}
//HTML获取与设置
Mquery.prototype.html = function (str) {
  //设置
  if (str) {
    for (var i = 0; i < this.elements.length; i++) {
      this.elements[i].innerHTML = str;
    }
    //获取
  } else {
    return this.elements[0].innerHTML;
  }
  return this;
}
//隐藏
Mquery.prototype.hide = function () {
  for (var i = 0; i < this.elements.length; i++) {
    //保存当前元素的display值
    this.elements[i].displayValue = this.elements[i].style.display;
    this.elements[i].style.display = 'none';
  }
  return this;
}
//显示
Mquery.prototype.show = function () {
  for (var i = 0; i < this.elements.length; i++) {
    this.elements[i].style.display = this.elements[i].displayValue;
    //删除保存的元素的display值
    delete this.elements[i].displayValue;
  }
  return this;
}
//事件绑定
Mquery.prototype.on = function (eventType, fn) {
  for (var i = 0; i < this.elements.length; i++) {
    _addEvent(this.elements[i], eventType, fn.bind(this.elements[i]));
  }
  return this;
}
//click简写
Mquery.prototype.click = function (fn) {
  this.on('click', fn);
  return this;
}
//鼠标移入移出
Mquery.prototype.hover = function (fnOver, fnOut) {
  this.on('mouseover', fnOver);
  this.on('mouseout', fnOut);
  return this;
}
$.extend = function (json) {
  for (var attr in json) {
    $[attr] = json[attr];
  }
};
$.fn = {};
$.fn.extend = function (json) {
  for (var attr in json) {
    Mquery.prototype[attr] = json[attr];
  }
};
function $(arg) {
  return new Mquery(arg);
}
